<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日本語の第二課 - 復習資料</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .container {
            background-color: white;
            border-radius: 20px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            width: 90%;
            max-width: 1000px;
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        h1 {
            font-size: 32px;
            margin-bottom: 10px;
        }
        
        .subtitle {
            font-size: 18px;
            opacity: 0.9;
        }
        
        .tabs {
            display: flex;
            background: #f0f0f0;
            overflow-x: auto;
        }
        
        .tab {
            padding: 15px 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
            font-weight: 500;
        }
        
        .tab.active {
            background: white;
            border-bottom: 3px solid #ff6b6b;
            color: #ff6b6b;
        }
        
        .content {
            padding: 30px;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .grammar-point {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .grammar-title {
            color: #ff6b6b;
            font-size: 22px;
            margin-bottom: 15px;
            border-bottom: 2px solid #ff6b6b;
            padding-bottom: 5px;
        }
        
        .example {
            background: white;
            border-left: 4px solid #4facfe;
            padding: 15px;
            margin: 15px 0;
            border-radius: 0 8px 8px 0;
        }
        
        .japanese {
            font-size: 20px;
            margin-bottom: 5px;
        }
        
        .romaji {
            color: #666;
            font-style: italic;
            margin-bottom: 5px;
        }
        
        .translation {
            color: #333;
            font-weight: 500;
        }
        
        .practice-area {
            background: #e3f2fd;
            border-radius: 10px;
            padding: 20px;
            margin-top: 30px;
        }
        
        .practice-title {
            color: #1976d2;
            font-size: 20px;
            margin-bottom: 15px;
        }
        
        .btn {
            background: linear-gradient(to right, #ff6b6b, #ff8e8e);
            border: none;
            border-radius: 50px;
            color: white;
            padding: 12px 25px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
            margin-right: 10px;
            margin-bottom: 10px;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);
        }
        
        .audio-btn {
            background: #4facfe;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: 10px;
        }
        
        .audio-btn:hover {
            background: #3a9cfc;
            transform: scale(1.1);
        }
        
        .audio-btn i {
            color: white;
            font-size: 16px;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        th, td {
            border: 1px solid #ddd;
            padding: 12px 15px;
            text-align: left;
        }
        
        th {
            background-color: #f2f2f2;
            font-weight: 600;
        }
        
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        .notes {
            background: #fff8e1;
            border-left: 4px solid #ffc107;
            padding: 15px;
            margin: 15px 0;
            border-radius: 0 8px 8px 0;
        }
        
        .notes-title {
            color: #ff9800;
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        @media (max-width: 768px) {
            .tabs {
                flex-direction: column;
            }
            
            .tab {
                padding: 12px 15px;
            }
            
            .content {
                padding: 20px;
            }
            
            .btn {
                width: 100%;
                margin-bottom: 15px;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>日本語の第二課 - 復習資料</h1>
            <p class="subtitle">指示代詞・所有格・疑問文</p>
        </header>
        
        <div class="tabs">
            <div class="tab active" data-tab="kore">これ・それ・あれ</div>
            <div class="tab" data-tab="no">の助詞</div>
            <div class="tab" data-tab="kono">この・その・あの</div>
            <div class="tab" data-tab="koko">ここ・そこ・あそこ</div>
            <div class="tab" data-tab="practice">練習</div>
        </div>
        
        <div class="content">
            <!-- これ・それ・あれ -->
            <div class="tab-content active" id="kore">
                <div class="grammar-point">
                    <h3 class="grammar-title">これ・それ・あれ</h3>
                    <p>これ、それ、あれ是指示事物的代词，根据与说话者和听者的距离不同而使用不同的词。</p>
                    
                    <table>
                        <tr>
                            <th>代词</th>
                            <th>使用场景</th>
                            <th>中文意思</th>
                        </tr>
                        <tr>
                            <td>これ</td>
                            <td>离说话者近的事物</td>
                            <td>这个</td>
                        </tr>
                        <tr>
                            <td>それ</td>
                            <td>离听者近的事物</td>
                            <td>那个</td>
                        </tr>
                        <tr>
                            <td>あれ</td>
                            <td>离双方都远的事物</td>
                            <td>那个（远处）</td>
                        </tr>
                    </table>
                    
                    <div class="example">
                        <div class="japanese">これは本です。 
                            <button class="audio-btn" onclick="speak('これは本です')">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <div class="romaji">Kore wa hon desu.</div>
                        <div class="translation">这是书。</div>
                    </div>
                    
                    <div class="example">
                        <div class="japanese">それは何ですか。
                            <button class="audio-btn" onclick="speak('それは何ですか')">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <div class="romaji">Sore wa nan desu ka?</div>
                        <div class="translation">那是什么？</div>
                    </div>
                    
                    <div class="example">
                        <div class="japanese">あれは学校です。
                            <button class="audio-btn" onclick="speak('あれは学校です')">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <div class="romaji">Are wa gakkō desu.</div>
                        <div class="translation">那是学校。</div>
                    </div>
                </div>
            </div>
            
            <!-- の助詞 -->
            <div class="tab-content" id="no">
                <div class="grammar-point">
                    <h3 class="grammar-title">の助詞 - 表示所有关系</h3>
                    <p>助词"の"用于表示所有关系，相当于中文的"的"。</p>
                    
                    <div class="example">
                        <div class="japanese">それはわたしの傘です。
                            <button class="audio-btn" onclick="speak('それはわたしの傘です')">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <div class="romaji">Sore wa watashi no kasa desu.</div>
                        <div class="translation">那是我的伞。</div>
                    </div>
                    
                    <div class="example">
                        <div class="japanese">この本は田中さんのです。
                            <button class="audio-btn" onclick="speak('この本は田中さんのです')">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <div class="romaji">Kono hon wa Tanaka-san no desu.</div>
                        <div class="translation">这本书是田中的。</div>
                    </div>
                    
                    <div class="notes">
                        <div class="notes-title">注意：</div>
                        <p>"の"可以单独使用，代替名词，避免重复。例如："この本はわたしのです"（这本书是我的）。</p>
                    </div>
                </div>
            </div>
            
            <!-- この・その・あの -->
            <div class="tab-content" id="kono">
                <div class="grammar-point">
                    <h3 class="grammar-title">この・その・あの</h3>
                    <p>この、その、あの是指定连体词，必须后续名词使用。</p>
                    
                    <table>
                        <tr>
                            <th>连体词</th>
                            <th>使用场景</th>
                            <th>中文意思</th>
                        </tr>
                        <tr>
                            <td>この</td>
                            <td>离说话者近的事物</td>
                            <td>这个</td>
                        </tr>
                        <tr>
                            <td>その</td>
                            <td>离听者近的事物</td>
                            <td>那个</td>
                        </tr>
                        <tr>
                            <td>あの</td>
                            <td>离双方都远的事物</td>
                            <td>那个（远处）</td>
                        </tr>
                    </table>
                    
                    <div class="example">
                        <div class="japanese">この本はわたしのです。
                            <button class="audio-btn" onclick="speak('この本はわたしのです')">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <div class="romaji">Kono hon wa watashi no desu.</div>
                        <div class="translation">这本书是我的。</div>
                    </div>
                    
                    <div class="example">
                        <div class="japanese">その傘はだれのですか。
                            <button class="audio-btn" onclick="speak('その傘はだれのですか')">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <div class="romaji">Sono kasa wa dare no desu ka?</div>
                        <div class="translation">那把伞是谁的？</div>
                    </div>
                    
                    <div class="example">
                        <div class="japanese">あの人は先生です。
                            <button class="audio-btn" onclick="speak('あの人は先生です')">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <div class="romaji">Ano hito wa sensei desu.</div>
                        <div class="translation">那个人是老师。</div>
                    </div>
                </div>
            </div>
            
            <!-- ここ・そこ・あそこ -->
            <div class="tab-content" id="koko">
                <div class="grammar-point">
                    <h3 class="grammar-title">ここ・そこ・あそこ・どこ</h3>
                    <p>这里、那里等表示地点的代词。</p>
                    
                    <table>
                        <tr>
                            <th>代词</th>
                            <th>使用场景</th>
                            <th>中文意思</th>
                        </tr>
                        <tr>
                            <td>ここ</td>
                            <td>说话者所在的位置</td>
                            <td>这里</td>
                        </tr>
                        <tr>
                            <td>そこ</td>
                            <td>听者所在的位置</td>
                            <td>那里</td>
                        </tr>
                        <tr>
                            <td>あそこ</td>
                            <td>离双方都远的位置</td>
                            <td>那里（远处）</td>
                        </tr>
                        <tr>
                            <td>どこ</td>
                            <td>疑问词，询问地点</td>
                            <td>哪里</td>
                        </tr>
                    </table>
                    
                    <div class="example">
                        <div class="japanese">ここは学校です。
                            <button class="audio-btn" onclick="speak('ここは学校です')">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <div class="romaji">Koko wa gakkō desu.</div>
                        <div class="translation">这里是学校。</div>
                    </div>
                    
                    <div class="example">
                        <div class="japanese">トイレはどこですか。
                            <button class="audio-btn" onclick="speak('トイレはどこですか')">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <div class="romaji">Toire wa doko desu ka?</div>
                        <div class="translation">洗手间在哪里？</div>
                    </div>
                    
                    <h3 class="grammar-title" style="margin-top: 30px;">こちら・そちら・あちら・どちら</h3>
                    <p>更礼貌的表达方式，也可以用于指人。</p>
                    
                    <div class="example">
                        <div class="japanese">こちらは山田先生です。
                            <button class="audio-btn" onclick="speak('こちらは山田先生です')">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <div class="romaji">Kochira wa Yamada sensei desu.</div>
                        <div class="translation">这位是山田老师。</div>
                    </div>
                    
                    <h3 class="grammar-title" style="margin-top: 30px;">こう・そう・ああ・どう</h3>
                    <p>表示方式的副词。</p>
                    
                    <div class="example">
                        <div class="japanese">そうですか。
                            <button class="audio-btn" onclick="speak('そうですか')">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <div class="romaji">Sō desu ka.</div>
                        <div class="translation">是这样啊。</div>
                    </div>
                </div>
            </div>
            
            <!-- 練習 -->
            <div class="tab-content" id="practice">
                <div class="grammar-point">
                    <h3 class="grammar-title">練習問題</h3>
                    <p>选择正确的词语完成句子。</p>
                    
                    <div class="practice-area">
                        <div class="practice-title">問題 1: 那是谁的伞？</div>
                        <p>それは＿＿＿傘ですか。</p>
                        <button class="btn" onclick="checkAnswer(1, 'dareno')">だれの</button>
                        <button class="btn" onclick="checkAnswer(1, 'dare')">だれ</button>
                        <button class="btn" onclick="checkAnswer(1, 'nan')">何</button>
                        <p id="result1" style="margin-top: 10px; font-weight: 500;"></p>
                    </div>
                    
                    <div class="practice-area">
                        <div class="practice-title">問題 2: 这是书吗？是，这是书。</div>
                        <p>＿＿＿本ですか。はい、＿＿＿本です。</p>
                        <button class="btn" onclick="checkAnswer(2, 'korekore')">これ、これ</button>
                        <button class="btn" onclick="checkAnswer(2, 'koresore')">これ、それ</button>
                        <button class="btn" onclick="checkAnswer(2, 'sorekore')">それ、これ</button>
                        <p id="result2" style="margin-top: 10px; font-weight: 500;"></p>
                    </div>
                    
                    <div class="practice-area">
                        <div class="practice-title">問題 3: 那是圆珠笔还是自动铅笔？</div>
                        <p>それはボールペンですか。シャープペンシル＿＿＿。</p>
                        <button class="btn" onclick="checkAnswer(3, 'ka')">か</button>
                        <button class="btn" onclick="checkAnswer(3, 'no')">の</button>
                        <button class="btn" onclick="checkAnswer(3, 'desu')">です</button>
                        <p id="result3" style="margin-top: 10px; font-weight: 500;"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // タブ切り替え
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', () => {
                // すべてのタブとコンテンツを非アクティブに
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
                
                // クリックされたタブと対応するコンテンツをアクティブに
                tab.classList.add('active');
                document.getElementById(tab.getAttribute('data-tab')).classList.add('active');
            });
        });
        
        // 音声再生
        function speak(text) {
            if ('speechSynthesis' in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = 'ja-JP';
                utterance.rate = 0.8;
                speechSynthesis.speak(utterance);
            } else {
                alert('お使いのブラウザは音声合成に対応していません');
            }
        }
        
        // 練習問題の答えチェック
        function checkAnswer(question, answer) {
            const results = {
                1: { dareno: "正解！「だれの」は所有を尋ねる表現です。", dare: "違います。「だれ」だけでは所有を表せません。", nan: "違います。「何」は物を尋る言葉です。" },
                2: { korekore: "違います。相手の近くにあるものには「それ」を使います。", koresore: "正解！話者に近いものには「これ」、聞き手に近いものには「それ」を使います。", sorekore: "違います。話者に近いものには「これ」を使います。" },
                3: { ka: "正解！選択疑問文では「か」を使って選択肢を並べます。", no: "違います。ここでは所有を表す「の」は適切ではありません。", desu: "違います。選択疑問文では「です」だけでは不十分です。" }
            };
            
            document.getElementById('result' + question).textContent = results[question][answer];
            document.getElementById('result' + question).style.color = answer.includes('koresore') || answer === 'dareno' || answer === 'ka' ? '#4caf50' : '#f44336';
        }
    </script>
</body>
</html>